Exercises

Art Store, Revisited

Let's get some practice! We'll update the “art store” example we saw earlier in this module to use useReducer.

Acceptance Criteria:

The cartItems state should use the useReducer hook.
You should use the conventional switch/case structure discussed in the previous lesson within your reducer.

Code Playground

import React from 'react';

import Shop from './Shop';

import Header from './Header';

import CartButton from './CartButton';

function App() {

const [cartItems, setCartItems] = React.useState(

[]

);

function addToCart(item) {

setCartItems([...cartItems, item]);

}

return (

<Header

actions={

<CartButton

numOfItems={cartItems.length}

}

<Shop

paintings={DATA}

addToCart={addToCart}

</>

);

}

const DATA = [

{

id: 'summer-jubilee',

title: 'Summer Jubilee',

caption: 'Oil on canvas, 80" × 64"',

src: '/img/painting-01.jpg',

price: 12000,

{

id: 'spectacular-end',

title: 'A Spectacular End',

caption: 'Oil on canvas, 40" × 32"',

src: '/img/painting-02.jpg',

price: 4000,

{

id: 'crossing-the-chasm',

title: 'Crossing The Chasm',

caption: 'Oil on canvas, 32" × 24"',

src: '/img/painting-03.jpg',

price: 3600,

{

id: 'underneath',

title: 'Underneath',

caption: 'Oil on canvas, 40" × 32"',

src: '/img/painting-04.jpg',

price: 3000,

{

id: 'it-is-what-it-is',

title: 'It Is What It Is',

Solution:

Solution code (success)

import React from 'react';

import Shop from './Shop';
import Header from './Header';
import CartButton from './CartButton';

function reducer(cartItems, action) {
  switch (action.type) {
    case 'add-to-cart': {
      return [...cartItems, action.item];
    }
  }
}

function App() {
  const [cartItems, dispatch] = React.useReducer(reducer, []);

  function addToCart(item) {
    dispatch({
      type: 'add-to-cart',
      item,
    });
  }

  return (
    <>
      <Header actions={<CartButton numOfItems={cartItems.length} />} />

      <Shop paintings={DATA} addToCart={addToCart} />
    </>
  );
}

const DATA = [
  {
    id: 'summer-jubilee',
    title: 'Summer Jubilee',
    caption: 'Oil on canvas, 80" × 64"',
    src: '/img/painting-01.jpg',
    price: 12000,
  },
  {
    id: 'spectacular-end',
    title: 'A Spectacular End',
    caption: 'Oil on canvas, 40" × 32"',
    src: '/img/painting-02.jpg',
    price: 4000,
  },
  {
    id: 'crossing-the-chasm',
    title: 'Crossing The Chasm',
    caption: 'Oil on canvas, 32" × 24"',
    src: '/img/painting-03.jpg',
    price: 3600,
  },
  {
    id: 'underneath',
    title: 'Underneath',
    caption: 'Oil on canvas, 40" × 32"',
    src: '/img/painting-04.jpg',
    price: 3000,
  },
  {
    id: 'it-is-what-it-is',
    title: 'It Is What It Is',
    caption: 'Oil on canvas, 40" × 32"',
    src: '/img/painting-05.jpg',
    price: 6000,
  },
];

export default App;

Counter 2.0, One Last Time

I promise, this is the last time we'll hack on this counter example in this course!

Update the code below so that it uses the useReducer hook for the count state.

Acceptance Criteria:

The count state should use the useReducer hook.
You should use the conventional switch/case structure discussed in the previous lesson within your reducer.
Each button should get its own action type.

Code Playground

import React from 'react';

import {

ChevronUp,

ChevronsUp,

ChevronDown,

ChevronsDown,

RotateCcw,

Hash,

} from 'react-feather';

function Counter({ initialVal = 0 }) {

const [

count,

setCount,

] = React.useState(initialVal);

return (

<p>

<span>Current value:</span>

{count}

</span>

</p>

<button

onClick={() =>

setCount(count + 1)

}

Increase slightly

</span>

</button>

<button

onClick={() =>

setCount(count + 10)

}

Increase a lot

</span>

</button>

<button

onClick={() =>

setCount(initialVal)

}

Reset

</span>

</button>

<button

onClick={() => {

const nextCount = clamp(

Math.ceil(

Math.random() * 100

100

);

setCount(nextCount);

Solution:

Solution code (success)

import React from 'react';
import {
  ChevronUp,
  ChevronsUp,
  ChevronDown,
  ChevronsDown,
  RotateCcw,
  Hash,
} from 'react-feather';

function reducer(count, action) {
  switch (action.type) {
    case 'increment': {
      return count + 1;
    }
    case 'big-increment': {
      return count + 10;
    }
    case 'reset': {
      return action.initialVal;
    }
    case 'randomize': {
      return action.value;
    }
    case 'big-decrement': {
      return count - 10;
    }
    case 'decrement': {
      return count - 1;
    }
  }
}

function Counter({ initialVal = 0 }) {
  const [count, dispatch] = React.useReducer(
    reducer,
    initialVal
  );

  return (
    <div className="wrapper">
      <p>
        <span>Current value:</span>
        <span className="count">{count}</span>
      </p>
      <div className="button-row">
        <button
          onClick={() =>
            dispatch({ type: 'increment' })
          }
        >
          <ChevronUp />
          <span className="visually-hidden">
            Increase slightly
          </span>
        </button>
        <button
          onClick={() =>
            dispatch({ type: 'big-increment' })
          }
        >
          <ChevronsUp />
          <span className="visually-hidden">
            Increase a lot
          </span>
        </button>
        <button
          onClick={() =>
            dispatch({ type: 'reset', initialVal })
          }
        >
          <RotateCcw />
          <span className="visually-hidden">
            Reset
          </span>
        </button>
        <button
          onClick={() => {
            dispatch({
              type: 'randomize',
              value: clamp(
                Math.ceil(Math.random() * 100),
                1,
                100
              ),
            });
          }}
        >
          <Hash />
          <span className="visually-hidden">
            Set to random value
          </span>
        </button>
        <button
          onClick={() =>
            dispatch({ type: 'big-decrement' })
          }
        >
          <ChevronsDown />
          <span className="visually-hidden">
            Decrease a lot
          </span>
        </button>
        <button
          onClick={() =>
            dispatch({ type: 'decrement' })
          }
        >
          <ChevronDown />
          <span className="visually-hidden">
            Decrease slightly
          </span>
        </button>
      </div>
    </div>
  );
}

const clamp = (val, min = 0, max = 1) => {
  if (min > max) {
    [min, max] = [max, min];
  }

  return Math.max(min, Math.min(max, val));
};

export default Counter;

A simpler approach? (warning)

You might be wondering: wouldn't it be simpler to have a single action, something like updateCount?

function reducer(count, action) {
  switch (action.type) {
    case 'update-count': {
      return action.value;
    }
  }
}

// And then, in our JSX, we could do things like:
<button
  onClick={() => {
    dispatch({
      type: 'update-count',
      value: count + 1,
    })
  }}
>
  Increase slightly
</button>
<button
  onClick={() => {
    dispatch({
      type: 'update-count',
      value: count + 10,
    })
  }}
>
  Increase a lot
</button>

This approach sorta misses the point of useReducer. The beautiful thing about reducers is that it splits out the state-updating logic from the actions:

Actions describe what's happening, like a story being told about what the user is doing.
Reducers control how those actions affect the state.

There are a few benefits to structuring it this way:

All of the state-updating logic is grouped together, inside the reducer, instead of being sprinkled around the application.
Debugging becomes way easier (we can throw a console.log in the reducer and get a literal log of all the actions the user is performing!).

Now, in certain cases, we do need to do some pre-calculation in the action, to keep the reducer pure, like with our “Randomize” button. That's fine.

The thing you want to watch out for is having lots of action types that start with “update” or “set”. Remember, your actions should describe the events that are taking place in your application. It's the reducer's job to figure out how to respond to those actions!

It can take a while for the reducer philosophy to really click, but hopefully this is starting to make a bit more sense. Feel free to ask in Discord if you're not following!

Gradient Generator, Revisited

Let's tackle one more example: the “Gradient Generator” tool from Module 2.

This one is a bit trickier, because there are two state variables. Your goal is to merge them into a single reducer.

Acceptance Criteria:

All state should be managed with the useReducer hook.
In order for this to work, the state will need to be stored as an object that contains both the colors array and the numOfVisibleColors number.

This is a difficult challenge — I haven't yet shown you exactly how to solve these sorts of problems. Unless you have previous experience with Redux, you might not be able to solve it, and that's OK! The goal here is to spend 15 minutes giving it your best shot.

I'll explain everything in the solution video below. ❤️

Code Playground

import React from 'react';

function App() {

const [colors, setColors] = React.useState([

'#FFD500',

'#FF0040',

]);

const [

numOfVisibleColors,

setNumOfVisibleColors,

] = React.useState(2);

const visibleColors = colors.slice(0, numOfVisibleColors);

const colorStops = visibleColors.join(', ');

const backgroundImage = `linear-gradient(${colorStops})`;

function addColor() {

if (numOfVisibleColors >= 5) {

window.alert('There is a maximum of 5 colors');

return;

}

setNumOfVisibleColors(numOfVisibleColors + 1);

}

function removeColor() {

if (numOfVisibleColors <= 2) {

window.alert('There is a minimum of 2 colors');

return;

}

setNumOfVisibleColors(numOfVisibleColors - 1);

}

return (

<button onClick={removeColor}>Remove color</button>

<button onClick={addColor}>Add color</button>

</div>

<div

className="gradient-preview"

style={{

backgroundImage,

}}

{visibleColors.map((color, index) => {

const colorId = `color-${index}`;

return (

Color {index + 1}:

</label>

<input

id={colorId}

type="color"

Solution:

Solution code (success)

import React from 'react';

const INITIAL_STATE = {
  colors: [
    '#FFD500',
    '#FF0040',
    '#FF0040',
    '#FF0040',
    '#FF0040',
  ],
  numOfVisibleColors: 2,
};

function reducer(state, action) {
  switch (action.type) {
    case 'add-color': {
      return {
        ...state,
        numOfVisibleColors:
          state.numOfVisibleColors + 1,
      };
    }

    case 'remove-color': {
      return {
        ...state,
        numOfVisibleColors:
          state.numOfVisibleColors - 1,
      };
    }

    case 'change-color': {
      const nextColors = [...state.colors];
      nextColors[action.index] = action.value;

      return {
        ...state,
        colors: nextColors,
      };
    }
  }
}

function App() {
  const [state, dispatch] = React.useReducer(
    reducer,
    INITIAL_STATE
  );
  const { colors, numOfVisibleColors } = state;

  const visibleColors = colors.slice(
    0,
    numOfVisibleColors
  );

  const colorStops = visibleColors.join(', ');
  const backgroundImage = `linear-gradient(${colorStops})`;

  function addColor() {
    if (numOfVisibleColors >= 5) {
      window.alert(
        'There is a maximum of 5 colors'
      );
      return;
    }

    dispatch({ type: 'add-color' });
  }

  function removeColor() {
    if (numOfVisibleColors <= 2) {
      window.alert(
        'There is a minimum of 2 colors'
      );
      return;
    }

    dispatch({ type: 'remove-color' });
  }

  return (
    <div className="wrapper">
      <div className="actions">
        <button onClick={removeColor}>
          Remove color
        </button>
        <button onClick={addColor}>
          Add color
        </button>
      </div>

      <div
        className="gradient-preview"
        style={{
          backgroundImage,
        }}
      />

      <div className="colors">
        {visibleColors.map((color, index) => {
          const colorId = `color-${index}`;
          return (
            <div
              key={colorId}
              className="color-wrapper"
            >
              <label htmlFor={colorId}>
                Color {index + 1}:
              </label>
              <div className="input-wrapper">
                <input
                  id={colorId}
                  type="color"
                  value={color}
                  onChange={(event) => {
                    dispatch({
                      type: 'change-color',
                      value: event.target.value,
                      index,
                    });
                  }}
                />
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

export default App;